@extends('layouts.admin')
@section('pageTitle', '投票记录列表')
@section('style')
    <link rel="stylesheet" href="/css/CSS/main.css"/>
    <link href="//cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.min.css" rel="stylesheet">
    <style>
        .toolbar input {
            margin-right: 15px;
            margin-bottom: 15px;
        }
        legend{
            margin-bottom: 0;
        }
        .fixed-table-toolbar{
            padding: 5px 0;
        }
        .small-blue-button{
            margin: 0;
        }
        a:hover,a:focus,a:visited,a:active{
            text-decoration: none;
        }
    </style>
@endsection
@section('content')
    <div class="main-panel">
        <div class="content apartment-index" ng-controller="voteRecordController">
            <div class="container-fluid" style="min-height:600px;">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="header">
                                <legend>投票记录列表</legend>
                            </div>
                            <div class="header">
                                <a class="small-blue-button" onclick="toExport()">导出Excel</a>
                                <a class="small-blue-button" onclick="goBack()">返回活动列表</a>
                            </div>
                            <div class="toolbar" id="toolbar">
                                <input type="text" name="title" placeholder="候选人"/>
                                <input type="text" name="device" placeholder="投票设备"/>
                                <input type="text" class="p_daterangepicker" start="{{$activity -> startTime}}" end="{{$activity -> endTime}}" name="time" placeholder="开始时间"/>
                                <button style="border:none" class="btn" id="search"><i class="glyphicon glyphicon-search"></i></button>
                            </div>
                            <div style="padding: 0 15px;">
                                <table class="bootstrap-table-container" class="table" data-url="/web-api/votes/record">
                                    <thead>
                                    <th data-align="center" data-field="username">投票人</th>
                                    <th data-align="center" data-field="mobile" data-sortable="false">手机号</th>
                                    <th data-align="center" data-field="voted_at" data-sortable="false">投票时间</th>
                                    <th data-align="center" data-field="title" data-sortable="false">投票对象</th>
                                    <th data-align="center" data-field="device_id" data-sortable="false">投票设备</th>
                                    <th data-align="center" data-field="ip" data-sortable="false">投票ip</th>
                                    <th data-align="center" data-field="location" data-sortable="false">投票人所在地区</th>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div><!--  end card  -->
                    </div> <!-- end col-md-12 -->
                </div> <!-- end row -->
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script type="text/javascript">
            function GetRequest() {
                var url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for(var i = 0; i < strs.length; i ++) {
                        theRequest[strs[i].split("=")[0]]=decodeURIComponent(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            }
            var params = GetRequest();
            var query = {
                activity_id: params.activity_id,
                title: '',
                device: '',
                begin_time: '',
                end_time: ''
            }
            $('.bootstrap-table-container').bootstrapTable({
                toolbar: '.toolbar',
                clickToSelect: false,
                showRefresh: true,
                search: false,
                toolbarAlign: 'left',
                locale: 'zh-CN',
                showToggle: false,
                showColumns: false,
                pagination: true,
                idField: 'id',
                searchAlign: 'left',
                sortOrder: 'desc',
                buttonsAlign: 'right',
                sidePagination: 'server',
                pageSize: 8,
                pageList: [8, 10, 25, 50, 100],
                queryParams: function (params) {
                    return $.extend(params, query);
                }
            });
            $('#search').click(function(e){
                e.preventDefault();
                e.stopPropagation();
                search();
            });
            function search(){
                var title = $('input[name="title"]').val();
                var device = $('input[name="device"]').val();
                var begin_time = $('.p_daterangepicker').attr('start');
                var end_time = $('.p_daterangepicker').attr('end');
                query = {
                    activity_id: params.activity_id,
                    title: title,
                    device: device,
                    begin_time: begin_time,
                    end_time: end_time
                }
                $('.bootstrap-table-container').bootstrapTable('refreshOptions',{
                    queryParams:function(params){
                        return $.extend(params,query);
                    }
                });
            }
            function goBack($event){
                history.go(-1);
            }
            function toExport() {
                var title = $('input[name="title"]').val();
                var device = $('input[name="device"]').val();
                var begin_time = $('.p_daterangepicker').attr('start');
                var end_time = $('.p_daterangepicker').attr('end');
                window.location.href = '/web-api/votes/export-record/?begin_time='+begin_time+'&device='+device+'&title='+title+'&end_time='+end_time+'&activity_id='+params.activity_id;
            }
            var start = end = moment().format('YYYY/MM/DD');
            @if(!empty($activity))
                start = '{{$activity -> startTime}}';
                end = '{{$activity -> endTime}}';
            @endif
            require(['dateRangPicker'], function (dateRangPicker) {
                new dateRangPicker($('.p_daterangepicker'), {
                    startDate: start,
                    endDate: end,
                    locale: {
                        applyLabel: "确认",
                        cancelLabel: "取消",
                        fromLabel: "从",
                        toLabel: "至",
                        customRangeLabel: "自定义",
                        separator: " 至 ",
                        format: "YYYY-MM-DD",
                        monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                        daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"]
                    },
                    ranges: {
                        "今天": [moment(), moment().add(1, 'days')],
                        "昨天": [moment().subtract(1, "days"), moment().subtract(1, "days")],
                        "过去7天": [moment().subtract(6, "days"), moment().add(1, 'days')],
                        "过去30天": [moment().subtract(29, "days"), moment().add(1, 'days')],
                        "本月": [moment().startOf("month"), moment().endOf("month")],
                        "上个月": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
                    },
                }, function (start, end, label) {

                    $('.p_daterangepicker').attr('start', parseTime(start)).attr('end', parseTime(end));
                });

                function parseTime(time) {
                    var date = new Date(time);
                    return date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-' + date.getDate();
                }
            });
    </script>

@endsection